<template>
  <view>
    <u-calendar ref="calendar" :value="currentDate" @change="onCalendarChange">
      <!-- 在日历下方添加日程列表 -->
      <block slot="footer">
        <view class="schedule-list">
          <view v-if="schedules[currentDate] && schedules[currentDate].length > 0">
            <view v-for="(item, index) in schedules[currentDate]" :key="index" class="schedule-item">
              {{ item.time }} - {{ item.content }}
            </view>
          </view>
          <view v-else class="no-schedule">暂无日程</view>
        </view>
      </block>
    </u-calendar>
    <view class="add-button">
      <button @click="showAddScheduleModal">添加日程</button>
    </view>
    <!-- 添加日程的模态框 -->
    <u-popup v-model="addScheduleModalVisible" mode="bottom">
      <view class="add-schedule-form">
        <u-form ref="formRef">
          <u-form-item label="时间" prop="time">
            <u-time-picker v-model="newSchedule.time" type="time" placeholder="请选择时间"></u-time-picker>
          </u-form-item>
          <u-form-item label="内容" prop="content">
            <u-input v-model="newSchedule.content" placeholder="请输入日程内容"></u-input>
          </u-form-item>
        </u-form>
        <view class="form-actions">
          <u-button type="primary" @click="addSchedule">添加</u-button>
          <u-button type="default" @click="addScheduleModalVisible = false">取消</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentDate: '', // 当前选中的日期
      schedules: {}, // 日程数据
      addScheduleModalVisible: false, // 添加日程模态框的可见性
      newSchedule: { time: '', content: '' }, // 新日程的数据
    };
  },
  methods: {
    onCalendarChange(val) {
      this.currentDate = val;
    },
    showAddScheduleModal() {
      this.addScheduleModalVisible = true;
    },
    addSchedule() {
      const date = this.currentDate;
      if (!this.schedules[date]) {
        this.schedules[date] = [];
      }
      this.schedules[date].push({ time: this.newSchedule.time, content: this.newSchedule.content });
      this.addScheduleModalVisible = false;
      this.newSchedule = { time: '', content: '' };
    },
  },
};
</script>

<style lang="scss">
.schedule-list {
  padding: 10px;
  background-color: #fff;
  .schedule-item {
    padding: 5px 0;
  }
  .no-schedule {
    color: #999;
    text-align: center;
  }
}
.add-button {
  position: fixed;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
}
.add-schedule-form {
  padding: 20px;
  .form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
}
</style>
 